Step 2 - Create keyboard navigation for the Home screen
In this step you create keyboard navigation to switch between the application screens showing the recent and favorite destinations on the Home application screen. You also set focus to the button that opens the application screen which shows the sliders for adjusting the air conditioning temperature.
Set focus to elements in the Home application screen
In this section you create keyboard navigation to set focus to the button which navigates to the AirCondition application screen and to navigate to the Recent and Favorite application screens when the user presses the ↑ (Up Arrow) key on the keyboard.
To set focus to elements in the Home application screen:
In the Project > RootPage > NavigationButtons select the HomeButton node, in the Properties add the Up Navigation Node property, and set it to #ACButton. You set the application to set focus to the ACButton node when the HomeButton has focus and the user presses the ↑ (Up Arrow) key on the keyboard. When the ACButton node has focus, the user can use the Enter key on the keyboard to navigate to the AirCondition screen.
In the Project > RootPage > Home > HomeControls select the ACButton node, in the Node Components > Triggers section add to the Button: Click trigger a Set Focus action, and set the Target Item to #DriverButton. You set focus to the DriverButton node when the user presses the ACButton to navigate to the AirCondition screen.
In the Project > RootPage > Home > HomeControls select the RecentFavoriteNavigation node, in the Properties right-click, select Add Property > Focus Manager > Focus Scope property, and enable that property. You use the Focus Scope property to forward the focus from the RecentFavoriteNavigation node to the RecentButton node to allow navigation between the Recent and Favorite application screens. This way the user can use keyboard keys to navigate between those toggle buttons.
In the Project > RootPage > Home > HomeControls > RecentFavoriteNavigation select the RecentButton node, in the Properties right-click, select Add Property > Node > Logical Focus property, and enable that property. You set the RecentButton node to receive focus when you set focus to the Toggle Button Group 2D node RecentFavoriteNavigation.
In the Project > RootPage > Home > HomeControls select the ACButton node, in the Properties add the Up Navigation Node property, and set it to #RecentFavoriteNavigation. You set focus to the RecentFavoriteNavigation node when the user presses the ↑ (Up Arrow) key on the keyboard. The RecentFavoriteNavigation forwards the focus to the RecentButton node if the Page node Recent is active, and to the FavoriteButton node if the Page node Favorite is active.
In the Project select the Home > HomeControls > RecentFavoriteNavigation > RecentButton node and in the Node Components > Triggers section add an On Property Change trigger. You use the On Property Change trigger to set off actions in that trigger when the value of the Focused property of the RecentButton node changes.
In the Node Components in the On Property Change trigger click Trigger Settings to open the Trigger Settings Editor and set the Property Type to Node.Focused. You set the On Property Change trigger to keep track of when the value of the Focused property of the RecentButton node changes.
Add to the On Property Change trigger an Execute Script action and use the ButtonState.js script. When the RecentButton toggle button receives focus, the On Property Change trigger sets off the Execute Script action which toggles on that toggle button.
In the Node Components in the Toggle Button: Toggled On trigger add a Go to State action and in the action set:
Item to Screens/Screen/RootPage/Home/Recent
State to Recent State Manager/StateGroup/Focused
The Page node Recent uses a state manager which sets the appearance of that node when that page is active. You set the Recent node to change its appearance when the RecentButton receives focus.
In the On Property Change trigger click Add new trigger for On Property Change to add another On Property Change trigger and in the Trigger Settings set the Property Type to Node.Focused. You use this On Property Change trigger to change the appearance of the Page node Recent when the RecentButton is not focused.
In the Trigger Settings Editor click Add condition to add a condition to the On Property Change trigger and in the Trigger Condition Editor set:
Value A
Value From to Property
Item to <Relative> and #RecentButton
Property to Focused
Operator to =
Value B
Value From to Fixed
Fixed Value to disabled
In the Trigger Condition Editor and in the Trigger Settings Editor click Save.
In the Node Components in the On Property Change trigger you created add a Go to State action and in the action set:
Item to Screens/Screen/RootPage/Home/Recent
State to Recent State Manager/StateGroup/NotFocused
You set the Recent node to change its appearance when the RecentButton is not focused.
In the Preview when you press the ↑ (Up Arrow) key on the keyboard when the Home application screen is active, you:
Set focus to the button which you use to navigate to the AirCondition application screen. The ACButton node uses a state manager which highlights the button when it has focus.
Set focus and navigate to the Recent or Favorite screen based on which of those screens is active. The Recent and Favorite nodes use state managers which highlight those pages when they have focus.
In the Preview when the ACButton is focused, press the Enter key on the keyboard to navigate to the AirCondition application screen.
Set a keyboard key to focus the navigation bar
In this section you add the functionality to move the focus from the content of the Home application screen to the navigation bar.
To use keyboard keys to set focus to the navigation bar:
In the Project > RootPage > Home > HomeControls select the ACButton node, in the Properties add the Down Navigation Node property, and set it to #HomeButton. The application sets focus from the ACButton node to the HomeButton node on the navigation bar when the user presses the ↓ (Down Arrow) key on the keyboard.
Repeat the previous step for the Home > HomeControls > RecentFavoriteNavigation > RecentButton and FavoriteButton nodes but for those nodes set the Down Navigation Node property to #ACButton.
In the Preview when you press the ↓ (Down Arrow) key on the keyboard when the Recent or Favorite screen has focus, you:
Set focus to the button which you use to navigate to the AirCondition application screen.
Set focus to the navigation bar. You can use the → (Right Arrow) and ← (Left Arrow) keyboard keys to navigate to other application screens on the navigation bar.
Create keyboard navigation between the Recent and Favorite application screens
In this section you set the application to navigate between the Recent and Favorite application screens when the user presses a key on the keyboard.
To create keyboard navigation between the Recent and Favorite application screens:
In the Project select the RecentButton node, in the Node Components right-click the On Property Change trigger, and select Copy to copy that trigger. You use the same trigger in the FavoriteButton node.
In the Project select the FavoriteButton node and in the Node Components right-click and select Paste Trigger to paste the On Property Change trigger to that node.
In the Project select the FavoriteButton node and in the Node Components above the second On Property Change trigger click Trigger Settings, in the Trigger Settings Editor click the condition you created for the RecentButton node, and in the Trigger Condition Editor set the Item to #FavoriteButton.
In the Node Components in the second On Property Change trigger click the Go to State action, and in that action set:
Item to Screens/Screen/RootPage/Home/Favorite
State to Favorite State Manager/StateGroup/NotFocused
In the Node Components in the Toggle Button: Toggled On trigger add a Go to State action and in the action set:
Item to Screens/Screen/RootPage/Home/Favorite
State to Favorite State Manager/StateGroup/Focused
You set the Favorite node to change its appearance when the FavoriteButton receives focus.
In the Project select the RecentButton node, in the Properties add the Right Navigation Node property, and set it to #FavoriteButton. You set the application to set the focus from the RecentButton node to the FavoriteButton node when the user presses the → (Right Arrow) key on the keyboard.
In the Project select the FavoriteButton node, in the Properties add the Left Navigation Node property, and set it to #RecentButton. You set the application to set the focus from the FavoriteButton node to the RecentButton node when the user presses the ← (Left Arrow) key on the keyboard.
In the Preview when the Recent or Favorite application screen has focus, use the → (Right Arrow) and ← (Left Arrow) keyboard keys to navigate between those screens.
Set a key to close the air conditioning settings
In this section you set the AirCondition screen to close when the user presses the E keyboard key.
To set a key to close the air conditioning settings:
In the Project > RootPage > Home > AirCondition > AirConditionControls > Toggle Button Group 2D select the DriverButton node and in the Node Components in the Triggers section add a Key Down trigger. You use the Key Down trigger to set off an action which sets focus to a node when the user presses a specific key on the keyboard.
In the Trigger Settings for the trigger you created in the previous step click Add condition and in the Trigger Condition Editor set:
Value A
Value From to Message
Argument to Key The Key Down trigger intercepts the messages generated when a user presses down a key on the keyboard. The message contains the key code which Kanzi uses to set off the trigger.
Operator to =
Value B
Value From to Fixed
Fixed Value to 19
In the Trigger Condition Editor and the Trigger Settings Editor windows click Save You set the application to close the AirCondition window when the user presses the E key.
Add to the Key Down trigger the actions you need to close the AirCondition application screen:
A Navigate to Page action and set the Item to #Recent. You set the application to navigate to the Recent node in the Home node.
An Execute Script action, in the Execute Script window select + Create Script, name it CheckFocus, and in the Script Editor use this script:
// Get the Page Host node Home.
// The value of the <MadCap:variable name="UI Strings.Page.State" /> property tells whether
// the <MadCap:variable name="UI Strings.Page" /> or <MadCap:variable name="UI Strings.Page Host" /> node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
var homePage = node.lookupNode('#Home');
var homeActive = homePage.getProperty('Page.State');
var homeButton = node.lookupNode('#HomeButton');
var airConditionPage = node.lookupNode('#AirCondition');
var airConditionActive = airConditionPage.getProperty('Page.State');
if (homeActive == 1)
{
if (airConditionActive == 1)
{
airConditionPage.trySetFocus();
}
else
{
homeButton.trySetFocus();
}
}
You use the script to set focus to the navigation bar when the user closes the AirCondition application screen.
In the Project select the DriverButton node, in the Node Components right-click the Key Down trigger, and select Copy. You use the same trigger for the Passenger node and the Slider 2D nodes to close the AirCondition application screen when the user presses the E key.
In the Project select the PassengerButton node, in the Node Components right-click, and select Paste Trigger.
Repeat the previous step for the Home > AirCondition > Driver > Slider 2D and Home > AirCondition > Passenger > Slider 2D nodes to paste the Key Down trigger to those nodes.
In the Project > Home > AirCondition > AirConditionControls select the Close node, in the Node Components add to the Button: Click trigger a Set Focus action, and set the Target Item to #HomeButton. You set focus back to the HomeButton toggle button when the user uses the pointer to close the AirCondition application screen.
In the Preview in the AirCondition application screen press the E key on the keyboard to close that screen.
Use these keyboard keys to navigate the application:
← (Left Arrow) and → (Right Arrow) keys
Navigate between the Home, Media, Car, and Navigation application screens.
When the Recent or Favorite application screen has focus, navigate between those application screens.
↑ (Up Arrow) and ↓ (Down Arrow) keys
Set focus to the button which opens the AirCondition application screen.
Set focus to the Recent or Favorite application screen based on which of those application screens is active.
Enter key navigates to the AirCondition application screen when the ACButton node has focus.
